<template>
  <div class="videoList">
    <div class="container">
      <!-- 我的 视频列表 -->
      <div class="breadCrumb">
        <p class="item-title">
          我的视频列表
          <span class="create-icon">
            <i class="iconfont icon-jiahao"></i>
            <span>新建</span>
          </span>
        </p>
        <div class="listShow">
          <i class="iconfont icon-xiaosuolvetu"></i>
          <i class="iconfont icon-liebiao"></i>
        </div>
      </div>
      <!-- 视频展示 -->
      <div class="content" v-for="channel in channelList.list" :key="channel.cid">
        <div class="header">
          <div class="headerLeft">
            <a href="javascript:;" class="t">{{ channel.name }}</a>
            <span class="number">{{ channel.count }}</span>
          </div>
          <div class="headerRight">
            <a href="javascript:;" class="btn-paly">
              <span class="iconfont icon-bofang"></span>
              <span>播放全部</span>
            </a>
            <a href="javascript:;" class="more">
              <span>更多</span>
              <i class="iconfont icon-jinrujiantou"></i>
            </a>
          </div>
        </div>
        <ul class="videoShow">
          <!-- 添加视频 -->
          <!-- <li class="smallItem">
            <div class="add-video"></div>
          </li> -->
          <template v-for="video in channel.archives" :key="video.aid">
            <li
              class="smallItem"
              v-if="video.tid !== 0"
              @click="$router.push({ name: 'Video', query: { aid: video.aid, bvid: video.bvid } })"
            >
              <a href="javascript:;" class="videoPlay">
                <img :src="video.pic" alt="" class="videoImg" />
                <span class="videoDuration">{{
                  moment(video.duration * 1000).format('mm:ss')
                }}</span>
              </a>

              <a href="javascript:;" class="videoTitle">
                {{ video.title }}
              </a>
              <div class="videoMeta">
                <span class="videoData">
                  <i class="iconfont icon-bofang icon"></i>
                  <span>{{ localNum(video.stat.view, 1) }}</span>
                </span>
                <span class="videoData">
                  <i class="iconfont icon-shijian icon"></i>
                  <span>{{ moment(video.pubdate * 1000).format('YYYY-MM-DD') }}</span>
                </span>
              </div>
            </li>
          </template>

          <!-- <li class="smallItem">
            <a href="javascript:;" class="videoPlay" >
              <img
                src="./image/9e0a6aa4c5b7bb5a73fc212905576f252d8351ee.jpg@560w_350h_100Q_1c.webp"
                alt=""
                class="videoImg"
              />
              <span class="videoDuration">04:30</span>
            </a>

            <a href="javascript:;" class="videoTitle" >
              今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面
            </a>
            <div class="videoMeta">
              <span class="videoData">
                <i class="iconfont icon-bofang icon"></i>
                <span>109</span>
              </span>
              <span class="videoData">
                <i class="iconfont icon-shijian icon"></i>
                <span>2021-12-1</span>
              </span>
            </div>
          </li>
          <li class="smallItem">
            <a href="javascript:;" class="videoPlay" >
              <img
                src="./image/9e0a6aa4c5b7bb5a73fc212905576f252d8351ee.jpg@560w_350h_100Q_1c.webp"
                alt=""
                class="videoImg"
              />
              <span class="videoDuration">04:30</span>
            </a>

            <a href="javascript:;" class="videoTitle" >
              今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面
            </a>
            <div class="videoMeta">
              <span class="videoData">
                <i class="iconfont icon-bofang icon"></i>
                <span>109</span>
              </span>
              <span class="videoData">
                <i class="iconfont icon-shijian icon"></i>
                <span>2021-12-1</span>
              </span>
            </div>
          </li>
          <li class="smallItem">
            <a href="javascript:;" class="videoPlay" >
              <img
                src="./image/9e0a6aa4c5b7bb5a73fc212905576f252d8351ee.jpg@560w_350h_100Q_1c.webp"
                alt=""
                class="videoImg"
              />
              <span class="videoDuration">04:30</span>
            </a>

            <a href="javascript:;" class="videoTitle" >
              今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面
            </a>
            <div class="videoMeta">
              <span class="videoData">
                <i class="iconfont icon-bofang icon"></i>
                <span>109</span>
              </span>
              <span class="videoData">
                <i class="iconfont icon-shijian icon"></i>
                <span>2021-12-1</span>
              </span>
            </div>
          </li>
          <li class="smallItem">
            <a href="javascript:;" class="videoPlay" >
              <img
                src="./image/9e0a6aa4c5b7bb5a73fc212905576f252d8351ee.jpg@560w_350h_100Q_1c.webp"
                alt=""
                class="videoImg"
              />
              <span class="videoDuration">04:30</span>
            </a>

            <a href="javascript:;" class="videoTitle" >
              今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面
            </a>
            <div class="videoMeta">
              <span class="videoData">
                <i class="iconfont icon-bofang icon"></i>
                <span>109</span>
              </span>
              <span class="videoData">
                <i class="iconfont icon-shijian icon"></i>
                <span>2021-12-1</span>
              </span>
            </div>
          </li>
          <li class="smallItem">
            <a href="javascript:;" class="videoPlay" >
              <img
                src="./image/9e0a6aa4c5b7bb5a73fc212905576f252d8351ee.jpg@560w_350h_100Q_1c.webp"
                alt=""
                class="videoImg"
              />
              <span class="videoDuration">04:30</span>
            </a>

            <a href="javascript:;" class="videoTitle" >
              今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面
            </a>
            <div class="videoMeta">
              <span class="videoData">
                <i class="iconfont icon-bofang icon"></i>
                <span>109</span>
              </span>
              <span class="videoData">
                <i class="iconfont icon-shijian icon"></i>
                <span>2021-12-1</span>
              </span>
            </div>
          </li>
          <li class="smallItem">
            <a href="javascript:;" class="videoPlay" >
              <img
                src="./image/9e0a6aa4c5b7bb5a73fc212905576f252d8351ee.jpg@560w_350h_100Q_1c.webp"
                alt=""
                class="videoImg"
              />
              <span class="videoDuration">04:30</span>
            </a>

            <a href="javascript:;" class="videoTitle" >
              今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面
            </a>
            <div class="videoMeta">
              <span class="videoData">
                <i class="iconfont icon-bofang icon"></i>
                <span>109</span>
              </span>
              <span class="videoData">
                <i class="iconfont icon-shijian icon"></i>
                <span>2021-12-1</span>
              </span>
            </div>
          </li> -->
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, onMounted } from 'vue'
  import { useRoute } from 'vue-router'

  export default defineComponent({
    name: 'VideoList',
  })
</script>

<script lang="ts" setup>
  import { VideoList, reqVideoList, reqChannelVideo } from '@/api/personal'
  import moment from 'moment'
  import { localNum } from '@/utils/lib'

  const route = useRoute()

  const hostMid = Number(route.query.hostMid)
  const channelList = ref<Partial<VideoList>>({})
  // const channelVideo = ref<Partial<ChannelVideo>>({})

  async function getVideoList(mid: number) {
    const res = await reqVideoList(mid)
    // console.log(res)
    channelList.value = res
    res.list.forEach((item) => {
      getChannelVideo(hostMid, item.cid)
    })
  }
  async function getChannelVideo(mid: number, cid: number) {
    const res = await reqChannelVideo(mid, cid)
    // console.log(res)
    channelList.value.list!.find((item) => item.cid === cid)!.archives = res.list.archives
  }

  onMounted(async () => {
    getVideoList(hostMid)
  })
</script>

<style lang="less" scoped>
  .videoList {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    & a:hover {
      color: #23c9ed;
    }
    .container {
      padding: 20px;
      //<!-- 我的 视频列表 -->
      .breadCrumb {
        height: 30px;
        display: flex;
        justify-content: space-between;
        .item-title {
          font-size: 18px;
          vertical-align: middle;
          display: flex;
          .create-icon {
            font-size: 12px;
            border: 1px solid #b7c0cc;
            border-radius: 4px;
            display: flex;
            box-sizing: border-box;
            width: 64px;
            height: 24px;
            color: #6d757a;
            margin-left: 10px;
            cursor: pointer;
            justify-content: center;
            align-items: center;
            .icon-jiahao {
              margin-right: 8px;
            }
          }
        }
        .listShow {
          color: #99a2aa;
          .icon-xiaosuolvetu {
            margin-right: 10px;
            font-size: 19px;
          }
          .icon-liebiao {
            font-size: 19px;
          }
          .icon-xiaosuolvetu:hover,
          .icon-liebiao:hover {
            color: #00a1d6;
          }
        }
      }
      //视频展示
      .content {
        width: 100%;
        border-bottom: 1px solid #e5e9ef;
        .header {
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          .headerLeft {
            font-size: 18px;
            line-height: 24px;
            .t {
              color: #222;
              font-size: 18px;
            }
            .number {
              background: #f6fafb;
              border: 1px solid #ddd;
              border-radius: 3px;
              color: #777;
              display: inline-block;
              font-size: 12px;
              line-height: 18px;
              height: 18px;
              margin-left: 10px;
              padding: 0 5px;
              vertical-align: middle;
            }
          }
          .headerRight {
            color: #99a2aa;
            display: flex;
            align-items: center;
            .btn-paly {
              margin-right: 8px;
              border: 1px solid #b7c0cc;
              box-sizing: border-box;
              border-radius: 4px;
              padding: 2px 7px;
              font-size: 14px;
            }
            .more {
              border: 1px solid #b8c0cc;
              border-radius: 4px;
              font-size: 14px;
              padding: 2px 10px;
            }
          }
        }
        .videoShow {
          list-style: none;
          margin-top: 10px;
          display: flex;
          flex-wrap: wrap;
        }
        .smallItem {
          width: 160px;
          height: 164px;
          padding: 10px 30px 10px 0px;
          cursor: pointer;
          .videoPlay {
            width: 160px;
            height: 100px;
            display: block;
            box-shadow: 0 0 0 1px #e5e9ef;
            border-radius: 4px;
            float: left;
            overflow: hidden;
            position: relative;
            margin-bottom: 6px;
            .videoImg {
              width: 160px;
              height: 100px;
              border-radius: 4px;
            }
            .videoDuration {
              background: rgba(0, 0, 0, 0.5);
              border-radius: 5px 0 0 0;
              color: #fff;
              line-height: 20px;
              padding: 0 6px;
              position: absolute;
              right: 0;
              bottom: 0;
            }
          }

          .videoTitle {
            width: 160px;
            height: 38px;
            display: block;
            font-size: 12px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 6px;
          }
          .videoMeta {
            color: #6d757a;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .videoData {
              .icon {
                vertical-align: middle;
                margin-right: 3px;
                position: relative;
                top: -2px;
                color: #6d757a;
              }
            }
          }
        }
      }
    }
  }
</style>
